<template>
  <div class="container" @click="isCloseType ? '' : close()">
    <div class="container-c" :style="{ width: width }" @click.stop="">
      <div class="title">{{ dataTitle }}</div>
      <div class="close point" @click="close()">×</div>
      <slot/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props: ['dataTitle', 'list', 'width', 'isCloseType'],
    methods: {
        close () {
            this.$emit('close')
            this.$Bus.emit('close2', '关闭了吗')
        }
    }
})
</script>

<style scoped lang="stylus">
.container
  width 100vw
  height 100vh
  background rgba(32, 37, 54, 0.6)
  position fixed
  top 0
  left 0
  flex-center()
  z-index 110

.container-c
  width 900px
  max-height 90vh
  overflow auto
  background white
  box-shadow 0px 2px 12px 0px rgba(0, 0, 0, 0.06)
  border-radius 8px
  border 1px solid #E4E7ED
  position relative

.container-c::-webkit-scrollbar
  width 10px
  height 1px

.container-c::-webkit-scrollbar-thumb
  border-radius 10px
  box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
  background #ccc

.container-c::-webkit-scrollbar-track
  box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
  border-radius 10px
  background #ededed

.title
  margin 30px auto
  text-align center
  font-size font-normal
  font-weight bold
  color #303133

.close
  position absolute
  right 20px
  top 16px
  font-size 28px
  color color-grey
  z-index 1000
</style>
